<template>
  <div class="page" ref="page" style="position:relative;width:100%;margin:0 auto;overflow:auto;">
    <!-- 展示列表模块 -->
    <div id="headInfo">
      <div style="float:right;height:1rem;line-height: 1rem;">
        设备名称: {{ deviceData.equip_name }}　设备编码: {{ deviceData.equip_code }}<span v-if="!isRead">
        <span v-if="deviceData.firmware_version">　固件版本: {{ 'V' + deviceData.firmware_version }}</span>　数据点总数: {{sensorTotal }}　</span>
        运行状态:<div class="stateBox"> <span
            :class="isOn == 1 ? 'onLine' : 'offLine'">{{ isOn == 1 ? '在线' : '离线' }}</span>
          <span  class="stateBtn"
            @click="getState(deviceData.id)" title="点击刷新状态"><i class="el-icon-refresh"></i></span>
        </div>
        <!-- <el-button type="primary" size="mini" @click="goList">返回列表</el-button> -->
        <!-- <span class="backBtn" @click="goList" title="点击返回设备列表"><i class="el-icon-s-fold"></i></span> -->
        <div class="backBtn" title="点击返回设备列表" @click="goList" ></div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabsOption">
      <el-tab-pane label="设备信息" name="info" :disabled="activeName == 'info'">
        <EquipInfo :deviceData="deviceData" :isOn="isOn"></EquipInfo>
      </el-tab-pane>
      <el-tab-pane label="参数配置" name="argment" :disabled="activeName == 'argment'">
        <ArgmentSet v-if="activeName == 'argment'" :deviceData="deviceData" :isOn="isOn"></ArgmentSet>
      </el-tab-pane>
      <el-tab-pane label="变量配置" name="sensor" :disabled="activeName == 'sensor'">
        <Slave v-if="activeName == 'sensor' && !isRead" :deviceData="deviceData" :isOn="isOn" :isRead="isRead"
          @goRead="readChange" @getDeviceInfo="getInfo"></Slave>
        <SlaveRead v-if="activeName == 'sensor' && isRead" :deviceData="deviceData" :isOn="isOn" :isRead="isRead"
          @goSet="readChange"></SlaveRead>
      </el-tab-pane>
      <el-tab-pane v-if="deviceData.version == 4" label="边缘计算" name="script" :disabled="activeName == 'script'">
        <sManage v-if="activeName == 'script' && !isReadManage" :deviceData="deviceData" :isOn="isOn"
          :isReadManage="isReadManage" @goRead="readScriptChange"></sManage>
        <rManage v-if="activeName == 'script' && isReadManage" :deviceData="deviceData" :isOn="isOn"
          :isReadManage="isReadManage" @goSet="readScriptChange"></rManage>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import ChannelInfo from '../templates/ChannelInfo.vue';
// import SlaveInfo from '../templates/SlaveInfo.vue';
// import SensorSetList from '../templates/SensorSetList.vue';
// import Test from '../templates/Test.vue';
//import FormulaCreater from '../templates/FormulaCreater.vue';
import EquipInfo from '../templates/EquipInfo.vue';
import Slave from '../templates/slave.vue';
import SlaveRead from '../templates/slaveRead.vue';
import ArgmentSet from '../templates/ArgmentSet.vue'
import sManage from '../templates/scriptManage.vue';
import rManage from '../templates/readManage.vue';
export default {
  name: 'deviceSet',
  data() {
    return {
      //当屏幕小于1360时，控制元素影藏；
      win: window,
      screen_1360: false,
      deviceData: null,
      isOn: 0,
      one: 1,
      zero: 0,
      isRead: false,
      isReadManage: false,
      activeName: "sensor",
      //fromPage:'',
      screenWidth: 1920,
      sensorTotal:0,
      tokenTimer: null,
      stateTimer: null,
    }
  },
  components: {
    EquipInfo,
    Slave,
    SlaveRead,
    sManage,
    rManage,
    ArgmentSet


  },


  created() {
    this.deviceData = JSON.parse(localStorage.getItem('deviceData'));
    this.isOn = Number(this.deviceData.is_on);
    this.getInfo(this.deviceData.id);
    this.activeName = localStorage.getItem('activeName') || 'sensor';
  },

  mounted() {
    var that = this;
    this.$refs.page.style.height = window.innerHeight + 'px';
    this.getToken();
    this.tokenTimer = setInterval(function () {
      that.getToken();
    }, 10200000);
    this.screenWidth = window.screen.width || 1920;
    if (localStorage.getItem("operType") == 'send') {
      this.isOn = 0;
      this.stateTimer = setTimeout(function () {
        that.getState(that.deviceData.id);
      }, 50000);
    }
  },

  methods: {
    readChange(read) {
      this.isRead = read;
    },
    readScriptChange(read) {
      this.isReadManage = read;
    },

    handleClick(tab, e) {
      //console.log(tab);
      this.activeName = tab.name;
      if (tab.name == 'sensor') {
        this.isRead = false;
      }
      localStorage.setItem('activeName', tab.name)
      if (tab.name = "script") {
        this.isReadManage = false;
      }
    },
    refreshState(id) {
      var that = this;
      this.$http({
        method: 'post',
        url: 'api/equip/online',
        data: {
          'id': id
        }
      }).then(res => {
        if (res && res.data.result == "success") {
          this.isOn = Number(res.data.data.is_on);
          localStorage.removeItem("operType");
          this.$notify({
            title: '状态提示:',
            message: that.isOn == 1 ? '当前设备已在线,状态已更新！' : '当前设备已离线,状态已更新,部分操作将无法使用！',
            duration: 3000,
            position: 'top-right',
            offset:100
          });
        }

      }).catch(error => {
        console.log(error);
      });

    },

    async getState(id) {
      await this.refreshState(id);
      this.getInfo(id);
    },

    getInfo(id) {
      var that = this;
      this.$http({
        method: 'post',
        url: 'api/equip/info',
        data: {
          "id": id
        }
      }).then(res => {
        if (res && res.data.result == "success") {
          for (var key in this.deviceData) {
            this.deviceData[key] = res.data.data[key];
          }
          this.sensorTotal=res.data.data.sensors_count;
          localStorage.setItem("deviceData", JSON.stringify(that.deviceData));
          //console.log(this.deviceData);
          //this.deviceData.firmware_version = res.data.data.firmware_version;
        }
      }).catch(error => {
        console.log(error);
      });
    },

    getChild() {
      //$emit触发事件
      this.$refs.sensorList.$emit("testChild");
      console.log("a");
    },

    fatherMethod() {
      console.log("这是父组件");
    },

    goBack() {
      this.$router.go(-1);
    },

    goList() {
      //localStorage.removeItem("lookData");
      if (this.isExam) {
        this.cancelConnect();
      }
      //localStorage.removeItem('deviceData');
      localStorage.removeItem('activeName');
      this.$router.push({
        name: 'device',
        path: '/device',
        component: 'device'
      });
    }
  },

  beforeDestroy() {

    this.$message.closeAll();
  },

  destroyed() {
    var that = this;
    clearTimeout(that.stateTimer);
    clearInterval(that.timer);
    clearInterval(that.tokenTimer);


  }
}
</script>

<style scoped>
* {
  margin: 0;
  /*padding:0; */
  /* box-sizing:border-box; */
}

.page {
  height: 100vh;
  /* border:1px solid green; */
}

.top {
  border: none;
}

.stateBox{
  display: inline-block;
  vertical-align:top;
  min-width:1.8rem;
  height: 1rem;
  text-align: center;
  line-height:1rem;
  margin-left:0.1rem;
  margin-right:0.1rem;
  /* border:1px solid red; */
}

.onLine,
.offLine {
  float:left;
  /* display: inline-block; */
  /* vertical-align:bottom; */
  color: #fff;
  width: 1.2rem;
  height: 0.5rem;
  line-height: 0.5rem;
  padding: 0 !important;
  background-color: green;
  margin-top:0.25rem;
}

.offLine {
  background-color: #bbb;
}

.stateBtn,.backBtn{
  display: inline-block;
  width:0.6rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size:0.45rem;
  border:1px solid #ccc;
  margin:0;
  color:deepskyblue;
  cursor: pointer;
}

.stateBtn{
  float:left;
  margin-top: 0.25rem;
}

.backBtn{
  vertical-align:top;
  margin-top: 0.25rem;
  background-image: url(../../static/fanhui.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 0.5rem 0.5rem;
}

.tip {
  display: block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 0.25rem;
  margin-top: 0.2rem;
}

.tip_1 {
  color: #FF5722;
  width: 2.5rem;
  font-size: 0.25rem;
  margin-top: 0.1rem;
  line-height: 0.3rem;
  overflow: visible;
  /* margin-bottom:0rem; */
}

.tip_2 {
  float: left;
  width: auto;
  color: red;
  font-size: 0.35rem;
  font-weight: 550;
  margin-left: 0.3rem;
  vertical-align: middle;
}

#headInfo {
  min-width: 50%;
  position: absolute;
  top: 0;
  right: 0.1rem;
  border: none;
  z-index: 999;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.3rem;
  box-sizing: border-box;
  padding-right: 0.37rem;
}


.tabsOption {
  position: relative;
  z-index: 1;
  box-shadow: none !important;
  height: calc(100vh - 1rem);
  width: 100%;
  /* border: 1px solid red; */
  /* border-top: 2px solid #e4e7ed; */
}

.tabsOption /deep/ .el-tabs__header {
  height: 1rem !important;
  line-height: 1rem !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  /* padding-left: 0.8rem; */
}

.tabsOption /deep/ .el-tabs__content {
  /* padding: 0 6px !important; */
}

.tabsOption /deep/ .el-tabs__nav-scroll {
  height: 1rem !important;
  line-height: 1rem !important;
}

.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav {
  height: 1rem !important;
  line-height: 1rem !important;
}

.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item {
  height: 1rem !important;
  line-height: 1rem !important;
  vertical-align: top !important;
  font-size: 0.35rem;
  width: 2.2rem !important;
  padding: 0 4px !important;
  text-align: center !important;
  /* padding-top:0; */
  /* font-family: "黑体"; */
  font-weight: 700;
  color: #222;
  z-index: 1;
  /* border:1px solid red; */
  /* margin-top: 1px; */
  border-left: 2px solid #E4e7ed;
}

/* .tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item + .tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item{
   border: 2px solid #111!important;
} */

.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item:last-child {
  border-right: 2px solid #E4e7ed;
}

.tabsOption /deep/ .el-tabs__nav-scroll .el-tabs__nav .is-active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
  padding: 0 4px !important;

}
</style>
